<div [formGroup]="parent">
  <div formGroupName="config" *ngIf="parent.get('config')">
    <div class="config__row">
      <div class="config__cell">
        <label class="label">Monitoring model: </label>
        <mdl-select
          [formControl]="parent.get('config').get('model')"
          label="Choose monitoring model"
        >
          <mdl-option *ngFor="let model of models" [value]="model">{{
            model.name
          }}</mdl-option>
        </mdl-select>
      </div>
      <div class="config__cell">
        <label class="label">Version: </label>
        <mdl-select
          name="modelVersion"
          [formControl]="parent.get('config').get('modelVersionId')"
          label="Choose version"
        >
          <mdl-option
            *ngFor="let modelVersion of modelVersions"
            [value]="modelVersion.id"
            >{{ modelVersion.modelVersion }}</mdl-option
          >
        </mdl-select>
      </div>
    </div>
    <div
      class="config__row"
      *ngIf="parent.get('config').get('thresholdCmpOperator')"
    >
      <div class="config__cell">
        <label class="label" for="thresholdCmpOperator"
          >Comparison operator:
        </label>
        <mdl-select
          name="thresholdCmpOperator"
          [formControl]="parent.get('config').get('thresholdCmpOperator')"
          label="Comparison operator"
        >
          <mdl-option
            *ngFor="let operator of thresholdCmpOperators"
            [value]="operator"
            >{{ operator.kind }}</mdl-option
          >
        </mdl-select>
      </div>
      <div class="config__cell">
        <hydro-input-text
          name="threshold"
          label="Threshold"
          [formControl]="parent.get('config').get('threshold')"
          bordered="true"
        >
        </hydro-input-text>
        <ng-container
          *ngIf="
            parent.get('config').get('threshold').dirty &&
              parent
                .get('config')
                .get('threshold')
                .getError('pattern');
            let error
          "
        >
          <ul class="error__list metric-spec-config__error-list">
            <li class="error__item">
              {{ error }}
            </li>
          </ul>
        </ng-container>
      </div>
    </div>
  </div>
</div>
